<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    
    <title>首页</title>
</head>
<body>
   
    <div class="hm_layout">
        <header class="hm_header">
            <div class="hm_header_box">
                <!-- logo -->
                <a href="javascript:;" class="icon_logo"></a>
                <!-- 搜索框 -->
                <form action="#">
                    <span class="icon_search"></span>
                    <input type="search" placeholder="搜索">
                    <a href="#" class="login">登录</a>
                </form>
            </div>
        </header>
        <div class="hm_banner">
            <ul class="clearfix hm_bannerImg">
                <li><a href="javascript:;"><img src="./img/1.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./img/2.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./img/3.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./img/4.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./img/5.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./img/6.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./img/7.png" alt=""></a></li>
                <li><a href="javascript:;"><img src="./img/8.png" alt=""></a></li>
            </ul>
            <ul class="hm_bannerIndicator">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <nav class="hm_nav">
            <div class="nav-box">
                <ul class="top-nav">
                    <li>
                        <a href="#">
                            <img src="./img/first.png" alt="">
                            <p>分类查询</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="./img/nav0.png" alt="">
                            <p>黑马超市</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="./img/nav1.png" alt="">
                            <p>购物车</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="./img/nav2.png" alt="">
                            <p>个人中心</p>
                        </a>
                    </li>
                </ul>
                <ul class="bottom-nav">
                    <li>
                        <a href="javascript:;">
                            <img src="./img/nav3.png" alt="">
                            <p>充值中心</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="./img/nav4.png" alt="">
                            <p>黑马理财</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="./img/nav5.png" alt="">
                            <p>黑马培训</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <img src="./img/nav6.png" alt="">
                            <p>黑马圈子</p>
                        </a>
                    </li>
                </ul>
            </div>
            

        </nav>
        <main class="hm_product">
            <section class="product_box hm_sk clearfix">
                <div class="product_box_tit">
                    <div class="f_left m_110">
                        <span class="sk_icon m_110"></span>
                        <span class="sk_name m_110">掌上秒杀</span>
                        <div class="sk_time m_110">
                            <span>0</span>
                            <span>0</span>
                            <span>:</span>
                            <span>0</span>
                            <span>0</span>
                            <span>:</span>
                            <span>0</span>
                            <span>0</span>
                        </div>
                    </div>
                    <div class="f_right m_r10"><a href="">更多</a></div>
                </div>
                <!-- 主体内容 -->
                <div class="product_box_con">
                        <ul class="clearfix">
                            <li>
                                <a href="javascript:;"><img src="./img/detail01.png"></a>
                                <p>&yen;10.00</p>
                                <p>&yen;100.00</p>
                                
                            </li>
                            <li>
                                <a href="javascript:;"><img src="./img/detail02.png"></a>
                                <p>&yen;10.00</p>
                                <p>&yen;100.00</p>
                            </li>
                            <li>
                                <a href="javascript:;"><img src="./img/detail03.png"></a>
                                <p>&yen;10.00</p>
                                <p>&yen;100.00</p>
                                
                            </li>
                        </ul>

                </div>
            </section>
            <section class="product_box">
                <!-- 头部内容 -->
                 <div class="product_box_tit"><h3>优惠活动</h3></div>
                 <!--  主题内容 -->
                   <div class="product_box_con clearfix">
                    <a href="javascript:;" class="f_left w_50 b_right"><img src="./img/cp1.png" alt=""></a>
                    <a href="javascript:;" class="f_right w_50 b_bottom"><img src="./img/cp2.png" alt=""></a>
                    <a href="javascript:;" class="f_right w_50 "><img src="./img/cp3.png" alt=""></a>
                   </div>
            </section>
            <section class="product_box">
                <div class="product_box_tit"><h3>黑马超市</h3></div>
                <!-- 主题内容 -->
                 <div class="product_box_con clearfix">
                    <a href="javascript:;" class="f_right w_50 b_left"><img src="./img/cp4.png" alt=""></a>
                    <a href="javascript:;" class="f_left w_50 b_bottom"><img src="./img/cp5.png" alt=""></a>
                    <a href="javascript:;" class="f_left w_50 "><img src="./img/cp6.png" alt=""></a>
                 </div>
            </section>
        </main>
    </div>
    <script src="./js/index.js">

    </script>
</body>
</html>
